<!-- 投诉/商务合作通用组件 -->
<template>
	<view class="enter">
		<view class="bg">
			<Header :title="title" :isShowRight="false" @back="back"/>
		</view>
		<view class="box">
			<view class="content">
				<view class="item">
					<view>姓名</view>
					<u--input
					    placeholder="请输入姓名"
					    v-model="form.value"
					    @change="change"
							border="none"
							inputAlign="right"
					  ></u--input>
				</view>
				<view class="item">
					<view>联系方式</view>
					<u--input
					    placeholder="请输入联系方式"
					    v-model="form.value"
					    @change="change"
							border="none"
							inputAlign="right"
					  ></u--input>
				</view>
				
				<view class="item">
					<view>{{title == '商务合作'? '合作类型' : '投诉类型'}}</view>
					<view class="right" @click="showType = true">
						<text class="type" v-if="type == ''">请选择</text>
						<text v-else class="type black">{{type}}</text>
						<image class="img" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/vip/img7.png"></image>
					</view>
				</view>
				
				<view class="item description">
					<view class="title">{{title == '商务合作'? '合作说明' : '投诉内容'}}</view>
					<u--textarea confirmType="done" v-model="content" placeholder="请输入" maxlength="200" count class="text"></u--textarea>
				</view>
				
				<view class="submit" @click="submit">提交</view>
				
			</view>
		</view>
		
		<!-- 类型选择 -->
		<u-picker title="投诉类型" :show="showType" :columns="columns" @cancel="showType = false" @confirm	= 'confirm' :itemHeight="100"></u-picker>
		
	</view>
</template>

<script>
	import Header from '@/components/c_header.vue';
	export default{
		props:{
			title:{
				type:String,
				default:'投诉意见'
			},
			columns:{
				type:Array,
				default:() => []
			}
		},
		components:{
			Header
		},
		data(){
			return {
				content:'',//投诉内容
				type:'',//类型
				showType:false,
				form:{},
				items:[
					{
						text:'姓名',
						value:''
					},
					{
						text:'联系方式',
						value:''
					}
				],
			}
		},
		methods:{
			back(){
				uni.navigateBack();
			},
			confirm(e){
				this.type = e.value[0];
				this.showType = false;
			},
			submit(){
				this.$emit('submit');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.enter{
		background-color: #F4F6F8;
		height: 100vh;
		.bg{
			height:256rpx;
			padding:72rpx 0 0 32rpx;
			background-color: #194FC9;
			border-radius: 0px 0px 30rpx 30rpx;
		}
		.box{
			padding:0 30rpx;
			position:absolute;
			width: 100%;
			top:140rpx;
			left:50%;
			transform: translateX(-50%);
		}
		.content{
			width: 100%;
			background-color: #fff;
			border-radius: 30rpx 30rpx 0 0;
			padding:0 36rpx 64rpx;
			.submit{
				width: 636rpx;
				height: 90rpx;
				background: #194FC9;
				border-radius: 46rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 90rpx;
				margin-top:120rpx;
			}
			.item{
				padding:56rpx 14rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom:2rpx solid #F1F1F1;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #1A1A1A;
				.right{
					text-align: right;
					.type{
						color:#c0c4cc;
						margin-right:16rpx;
					}
					.black{
						color:black;
					}
				}
				view{
					width: 50%;
				}
				.img{
					width: 14rpx;
					height: 24rpx;
				}
			}
			.description{
				display: contents;
				&>.title{
					margin:56rpx 0 44rpx;
				}
				.text{
					background-color: #F8F8F8;
					width: 100%;
					height:238rpx;
				}
			}
		}
	}
</style>